<!-- 护理项目列表页 -->
<template>
  <div class="min-h serveProject bg-wt">
    <!-- 表单 -->
    <SearchForm :searchData="pages" @query="query"></SearchForm>

    <!-- 表格数据 -->
    <TableList :data="data" :hover="hover" :total="total" :pages="pages" @onChange="onChange" @handleBulid="handleBulid"
      @handleEdit="handleEdit" @OpenDelete="OpenDelete" @OpenDisable="OpenDisable"></TableList>

    <!-- 新增护理项目按钮和弹框 -->
    <DialogForm :visible="visible" :data="formBaseData" :title="title" @handleClose="handleClose" @handleAdd="handleAdd"
      @handleEdit="handleEdit" @handleUpdate="handleUpdate" ref="dialogForm"></DialogForm>

    <OperateDialog :visible="dialogVisible" @handleClose="handleClose" @handleDelete="handleDelete"></OperateDialog>

    <Forbidden :visible="ForbiddenVisible" :text="text" :header="header" @handleClose="handleClose" @handleSubmit="handleSubmit"></Forbidden>

  </div>
</template>

<script setup lang="jsx">
import { ref, onMounted } from 'vue';
import { getProjectList } from '../../../../api/serve.ts'
import { MessagePlugin } from 'tdesign-vue-next'
import TableList from './componts/TableList.vue'
import SearchForm from './componts/SearchForm.vue'
import DialogForm from './componts/DialogForm.vue'
import { projectAdd, getProjectDetails, projectUpdate, projectDelete ,projectStatus} from '@/api/serve'
import OperateDialog from '@/components/OperateDialog/index.vue'
import Forbidden from '@/components/Forbidden/index.vue'
const hover = ref(false);
const data = ref([]);
const total = ref(10);
const formBaseData = ref({});
const title = ref('');
const dialogForm=ref({});
const dialogVisible = ref(false);
const ForbiddenVisible = ref(false);

let pages = ref({
  pageNum: '1',
  pageSize: '10',
})

const onChange = (pageInfo) => {
  pages.value.pageNum = pageInfo.current;
  pages.value.pageSize = pageInfo.pageSize;
  query();
};

//分页查询护理项目信息
const query = async () => {
  let result = await getProjectList(pages.value)
  if (result.code == 200) {
    data.value = result.data.records;
    pages.value.pageNum = result.data.page;
    pages.value.pageSize = result.data.pageSize;
    total.value = result.data.total;
  }
}

//弹框
const visible = ref(false);

let handleBulid = () => {
  title.value = '新增';
  dialogForm.value.handleClear();
  visible.value = true;
}

let handleClose = () => {
  visible.value = false;
  dialogVisible.value = false;
  ForbiddenVisible.value = false;
}

//新增护理项目
let handleAdd = async (val) => {
  let result = await projectAdd(val)
  if (result.code == 200) {
    MessagePlugin.success('新增成功')
    query()
    visible.value = false;
  } else {
    MessagePlugin.error(result.msg)
  }
}

// 打开修改护理项目弹窗
let handleEdit = async (row) => {
  dialogForm.value;
  title.value = '修改'
  dialogForm.value.handleClear();
  let result = await getProjectDetails(row.id)
  if (result.code === 200) {
    formBaseData.value = result.data;
    visible.value = true;
  }
}

//修改护理项目
let handleUpdate = async (val) => {
  let result = await projectUpdate(val);
  if (result.code === 200) {
    MessagePlugin.success('修改成功')
    visible.value = false;
    query();
  } else {
    MessagePlugin.error(result.msg)
  }
}

//打开删除护理项目弹窗
let OpenDelete = async (row) => {
  pages.value.id = row.id;
  dialogVisible.value = true;
}

//删除护理项目
let handleDelete = async () => {
  if (pages.value.id) {
    let result = await projectDelete(pages.value.id)
    if (result.code === 200) {
      MessagePlugin.success('删除成功')
      delete pages.value.id;
      query();
      dialogVisible.value = false;
    } else MessagePlugin.error(result.msg)
  }
}

//打开禁用弹框
let text=ref('');
let OpenDisable = (row) => {
  pages.value.id=row.id;
  pages.value.status=row.status;
  if(row.status==1){
    text.value='确认禁用'
  }else text.value='确认启用'
  ForbiddenVisible.value = true;
}

//禁用或启用
let handleSubmit = async () => {
  let result = await projectStatus(pages.value)
  if(result.code===200){
    MessagePlugin.success('操作成功')
    delete pages.value.id;
    delete pages.value.status;
    query();
  ForbiddenVisible.value = false;
  }else MessagePlugin.error(result.msg)
}
onMounted(() => {
  query();
})
</script>